<script setup lang="ts">
import { reactive } from 'vue'
import { Tooltip } from '@/widgets'

interface FunctionalColor {
  name: string
  value: string
  color: string
  invert?: string
  light?: string
  dark?: string
}

/*
$colors: mergeColorMaps(
  ("white": ($white, $black), 
  "black": ($black, $white), 
  "light": ($light, $light-invert), 
  "dark": ($dark, $dark-invert), 
  "primary": ($primary, $primary-invert, $primary-light, $primary-dark), 
  "link": ($link, $link-invert, $link-light, $link-dark), 
  "info": ($info, $info-invert, $info-light, $info-dark), 
  "success": ($success, $success-invert, $success-light, $success-dark), 
  "warning": ($warning, $warning-invert, $warning-light, $warning-dark), 
  "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
*/
const functional = reactive<FunctionalColor[]>([
  {
    name: 'primary',
    value: '$blue',
    color: 'rgba(55, 122, 195, 0.95)',
    invert: '#fff',
    light: 'rgba(239, 245, 251, 0.95)',
    dark: 'gba(49, 110, 175, 0.95)'
  },
  {
    name: 'link',
    value: '$blue',
    color: 'rgba(55, 122, 195, 0.95)',
    invert: '#fff',
    light: 'rgba(239, 245, 251, 0.95)',
    dark: 'gba(49, 110, 175, 0.95)'
  },
  {
    name: 'info',
    value: '$blue',
    color: 'rgba(55, 122, 195, 0.95)',
    invert: '#fff',
    light: 'rgba(239, 245, 251, 0.95)',
    dark: 'gba(49, 110, 175, 0.95)'
  },
  {
    name: 'success',
    value: '$green',
    color: 'rgba(127, 186, 0, 0.95)',
    invert: '#fff',
    light: 'rgba(249, 255, 235, 0.95)',
    dark: 'rgba(115, 168, 0, 0.95)'
  },
  {
    name: 'warning',
    value: '$yellow',
    color: 'rgba(255, 185, 0, 0.95)',
    invert: 'rgba(0, 0, 0, 0.7)',
    light: 'rgba(255, 249, 235, 0.95)',
    dark: 'rgba(148, 107, 0, 0.95)'
  },
  {
    name: 'danger',
    value: '$red',
    color: 'rgba(242, 80, 34, 0.95)',
    invert: '#fff',
    light: 'rgba(254, 240, 236, 0.95)',
    dark: 'rgba(202, 54, 12, 0.95)'
  },
  {
    name: 'white',
    value: '$white',
    color: 'hsl(0, 0%, 100%)',
    invert: 'hsl(0, 0%, 4%)'
  },
  {
    name: 'black',
    value: '$black',
    color: 'hsl(0, 0%, 4%)',
    invert: 'hsl(0, 0%, 100%)'
  },
  {
    name: 'light',
    value: '$grey-lightest',
    color: '#d0d6dd;', //$light: $grey-lightest
    invert: '#172a3f' //$dark:  $grey-dark
  },
  {
    name: 'dark',
    value: '$grey-dark',
    color: '#172a3f;', //$dark:  $grey-dark
    invert: '#d0d6dd' //$light: $grey-lightest
  },
  {
    name: 'text',
    value: ' $grey-dark',
    color: '#172a3f',
    invert: '#fff',
    light: '$grey #6d7986',
    dark: '$text-strong $grey-darker #0b1f35'
  },
  {
    name: 'background',
    value: '$white',
    color: 'hsl(0, 0%, 100%)'
  },
  {
    name: 'border',
    value: '$grey-lighter',
    color: '#b6bcc3'
  },
  {
    name: 'code',
    value: '$red',
    color: 'rgba(242, 80, 34, 0.95)'
  },
  {
    name: 'pre',
    value: '$text $grey-dark',
    color: '#172a3f'
  }
])

/*

$shades: mergeColorMaps((
  "black-bis": $black-bis, 
  "black-ter": $black-ter, 
  "grey-darker": $grey-darker, 
  "grey-dark": $grey-dark,
  "grey": $grey, 
  "grey-light": $grey-light, 
  "grey-lighter": $grey-lighter,
  "white-ter": $white-ter, 
  "white-bis": $white-bis), 
  $custom-shades
  ) !default
*/
interface NeutralColor {
  name: string
  color: string
}

const neutral = reactive<NeutralColor[]>([
  {
    name: 'black',
    color: 'hsl(0, 0%, 4%)'
  },
  {
    name: 'black-bis',
    color: 'hsl(0, 0%, 7%)'
  },
  {
    name: 'black-ter',
    color: 'hsl(0, 0%, 14%)'
  },
  {
    name: 'grey-darker',
    color: '#0b1f35'
  },
  {
    name: 'grey-dark',
    color: '#172a3f'
  },
  {
    name: 'grey',
    color: '#6d7986'
  },
  {
    name: 'grey-light',
    color: '#858f9a'
  },
  {
    name: 'grey-lighter',
    color: '#b6bcc3'
  },
  {
    name: 'grey-lightest',
    color: '#d0d6dd'
  },
  {
    name: 'white-ter',
    color: 'hsl(0, 0%, 96%)'
  },
  {
    name: 'white-bis',
    color: 'hsl(0, 0%, 98%)'
  },
  {
    name: 'white',
    color: 'hsl(0, 0%, 100%)'
  }
])

interface BaseColor {
  name: string
  color: string
  invert: string
}

const base = reactive<BaseColor[]>([
  {
    name: 'orange',
    color: 'rgba(255, 140, 0, 0.95)',
    invert: '#fff'
  },
  {
    name: 'yellow',
    color: 'rgba(255, 185, 0, 0.95)',
    invert: 'rgba(0, 0, 0, 0.7)'
  },
  {
    name: 'green',
    color: 'rgba(127, 186, 0, 0.95)',
    invert: '#fff'
  },
  {
    name: 'turquoise',
    color: 'rgba(0, 178, 148, 0.95)',
    invert: '#fff'
  },
  {
    name: 'cyan',
    color: 'rgba(80, 230, 255, 0.95)',
    invert: 'rgba(0, 0, 0, 0.7)'
  },
  {
    name: 'blue',
    color: 'rgba(55, 122, 195, 0.95)',
    invert: '#fff'
  },
  {
    name: 'purple',
    color: 'rgba(135, 100, 184, 0.95)',
    invert: '#fff'
  },
  {
    name: 'red',
    color: 'rgba(242, 80, 34, 0.95)',
    invert: '#fff'
  },
  {
    name: 'white',
    color: 'hsl(0, 0%, 100%)',
    invert: 'hsl(0, 0%, 4%'
  },
  {
    name: 'black',
    color: 'hsl(0, 0%, 4%)',
    invert: 'hsl(0, 0%, 100%)'
  }
])
</script>
<template>
  <div class="pane-block color-example">
    <div class="row">
      <div class="color-example-block">
        <div class="b-color">
          <div style="font-weight: bold; color: #0b1f35">基本色</div>
          <div style="font-weight: bold">颜色</div>
          <div style="font-weight: bold">反色</div>
        </div>
        <div class="b-color" v-for="(c, idx) in base" :key="`b-${idx}`">
          <div style="font-weight: bold">${{ c.name }}</div>
          <Tooltip :content="c.color">
            <div :class="`is-${c.name}`"></div>
          </Tooltip>
          <Tooltip :content="c.invert">
            <div :class="`is-${c.name}-invert`"></div>
          </Tooltip>
        </div>
      </div>
      <div class="color-example-block">
        <div class="n-color">
          <div style="font-weight: bold; color: #0b1f35">中性色</div>
          <div style="font-weight: bold">颜色</div>
        </div>
        <div class="n-color" v-for="(c, idx) in neutral" :key="`n-${idx}`">
          <div style="font-weight: bold">${{ c.name }}</div>
          <Tooltip :content="c.color" :theme="c.name">
            <div :class="`is-${c.name}`"></div>
          </Tooltip>
        </div>
      </div>
      <div class="color-example-block">
        <div class="f-color">
          <div style="font-weight: bold; color: #0b1f35">功能色</div>
          <div style="font-weight: bold">颜色</div>
          <div style="font-weight: bold">反色</div>
          <div style="font-weight: bold">浅色</div>
          <div style="font-weight: bold">深色</div>
        </div>
        <div class="f-color" v-for="(c, idx) in functional" :key="idx">
          <Tooltip :content="c.value" :theme="c.name">
            <div style="font-weight: bold">${{ c.name }}</div>
          </Tooltip>
          <Tooltip :content="c.color" :theme="c.name">
            <div :class="`is-${c.name}`"></div>
          </Tooltip>
          <Tooltip
            v-if="c.invert"
            :content="'$' + c.name + '-invert | ' + c.invert"
            :theme="c.name"
          >
            <div :class="`is-${c.name}-invert`"></div>
          </Tooltip>
          <Tooltip v-if="c.light" :content="'$' + c.name + '-light | ' + c.light" :theme="c.name">
            <div :class="`is-${c.name}-light`"></div>
          </Tooltip>
          <Tooltip v-if="c.dark" :content="c.dark" :theme="c.name">
            <div :class="`is-${c.name}-dark`"></div>
          </Tooltip>
        </div>
      </div>
    </div>
    <div class="note">
      <div>备注：</div>
      <div>
        1. <strong>基本色</strong>为
        <strong class="is-red">红</strong>
        <strong class="is-orange">橙</strong>
        <strong class="is-yellow">黄</strong>
        <strong class="is-green">绿</strong>
        <strong class="is-cyan">青</strong>
        <strong class="is-blue">蓝</strong>
        <strong class="is-purple">紫</strong>
        <strong class="is-black">黑</strong>
        <strong class="is-white">白</strong>
        等几种基本颜色.
      </div>
      <div>2. <strong>中性色</strong>为黑到白渐变的几种颜色，常用于背景、文字和边框.</div>
      <div>3. <strong>功能色</strong>由基本色和中性色衍生，用于表示不同的功能.</div>
      <div>
        4. 开发时css只能使用基本色,中性色和功能色. 推荐使用功能色.<strong class="is-danger"
          >严禁</strong
        >使用自定义颜色.
      </div>
      <div>
        5. 开发时,在scss开头加上
        <strong class="is-red">@import '@/widgets/var';</strong>
        既可以引用系统配色.
      </div>
      <div>
        6. <strong>反色</strong>为对应的颜色后面加上<strong>-invert</strong>.比如:
        <strong class="is-orange">$orange</strong>
        的反色为
        <strong class="is-orange-invert">$orange-invert</strong>,
        <strong class="is-primary">$primary</strong>的反色为
        <strong class="is-primary-invert">$primary-invert</strong>.
      </div>
      <div>
        7. <strong>浅色</strong>为对应的颜色后面加上<strong>-light</strong>,比如:
        <strong class="is-primary">$primary</strong>的浅色为
        <strong class="is-primary-light">$primary-light</strong>.
      </div>
      <div>
        8. <strong>深色</strong>为对应的颜色后面加上<strong>-dark</strong>,比如:
        <strong class="is-primary">$primary</strong>的深色为
        <strong class="is-primary-dark">$primary-dark</strong>.
      </div>
    </div>
  </div>
</template>
<style lang="scss">
@import '@/widgets/var';

// $orange: rgba(255, 140, 0, 0.95);
// $yellow: rgba(255, 185, 0, 0.95);
// $green: rgba(127, 186, 0, 0.95);
// $turquoise: rgba(0, 178, 148, 0.95);
// $cyan: rgba(80, 230, 255, 0.95);
// $blue: rgba(55, 122, 195, 0.95);
// $purple: rgba(135, 100, 184, 0.95);
// $red: rgba(242, 80, 34, 0.95);

$base-colors: (
  'orange': (
    $orange,
    $orange-invert
  ),
  'yellow': (
    $yellow,
    $yellow-invert
  ),
  'green': (
    $green,
    $green-invert
  ),
  'turquoise': (
    $turquoise,
    $turquoise-invert
  ),
  'cyan': (
    $cyan,
    $cyan-invert
  ),
  'blue': (
    $blue,
    $blue-invert
  ),
  'purple': (
    $purple,
    $purple-invert
  ),
  'red': (
    $red,
    $red-invert
  ),
  'white': (
    $white,
    $black
  ),
  'black': (
    $black,
    $white
  )
);

.color-example {
  .note > div {
    margin-top: 0.5em;
  }
  .color-example-block {
    display: flex;
    flex-direction: column;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    &:not(:first-child) {
      padding-left: 0.5em;
    }
    &:not(:last-child) {
      padding-right: 0.5em;
    }
    min-width: 8em;
    // > div:first-child {
    //   font-weight: 600;
    //   margin-bottom: 1em;
    // }
    &:not(:first-child) {
      border-left: 1px solid $border;
    }
  }

  .b-color {
    display: flex;
    flex-direction: row;
    > div {
      cursor: pointer;
      padding: 0.5em 0em;
      height: 2em;
      width: 6em;
      margin-top: 1px;
      margin-right: 1px;
    }

    @each $name, $pair in $base-colors {
      $color: nth($pair, 1);
      $color-invert: nth($pair, 2);
      .is-#{$name} {
        background-color: $color;
        color: $color-invert;
        &:hover {
          border: 1px solid darken($color, 10%);
        }
      }
      .is-#{$name}-invert {
        background-color: $color-invert;
        color: $color;
        &:hover {
          border: 1px solid darken($color-invert, 10%);
        }
      }
    }
  }

  .f-color {
    display: flex;
    flex-direction: row;
    // padding-top: 0.5em;
    // border-top: 1px solid $background;
    > div {
      cursor: pointer;
      padding: 0.5em 0em;
      height: 2em;
      width: 6em;
      margin-top: 1px;
      margin-right: 1px;
      &:first-child {
        width: 7em;
      }
      // border: 1px solid $background;
    }
    .is-background {
      background-color: $background;
      &:hover {
        border: 1px solid darken($background, 10%);
      }
    }
    .is-border {
      background-color: $border;
      &:hover {
        border: 1px solid darken($border, 10%);
      }
    }
    .is-text {
      background-color: $text;
      &:hover {
        border: 1px solid darken($text, 10%);
      }
    }
    .is-text-invert {
      background-color: $text-invert;
      &:hover {
        border: 1px solid darken($text-invert, 10%);
      }
    }
    .is-text-dark {
      background-color: $text-strong;
      &:hover {
        border: 1px solid darken($text-strong, 10%);
      }
    }
    .is-text-light {
      background-color: $text-light;
      &:hover {
        border: 1px solid darken($text-light, 10%);
      }
    }
    .is-code {
      background-color: $code;
      &:hover {
        border: 1px solid darken($code, 10%);
      }
    }
    .is-pre {
      background-color: $pre;
      &:hover {
        border: 1px solid darken($pre, 10%);
      }
    }
    @each $name, $pair in $colors {
      $color: nth($pair, 1);
      $color-invert: nth($pair, 2);
      .is-#{$name} {
        background-color: $color;
        color: $color-invert;
        &:hover {
          // background-color: darken($color, 5%);
          border: 1px solid darken($color, 10%);
        }
      }
      .is-#{$name}-invert {
        background-color: $color-invert;
        color: $color;
        &:hover {
          // background-color: darken($color-invert, 5%);
          border: 1px solid darken($color-invert, 10%);
          // border: 1px solid $color;
        }
      }
      @if length($pair) >= 4 {
        $color-light: nth($pair, 3);
        $color-dark: nth($pair, 4);
        .is-#{$name}-light {
          background-color: $color-light;
          color: $color-dark;
          &:hover {
            // background-color: darken($color-light, 5%);
            border: 1px solid darken($color-light, 10%);
          }
        }
        .is-#{$name}-dark {
          background-color: $color-dark;
          color: $color-light;
          &:hover {
            // background-color: darken($color-dark, 5%);
            border: 1px solid darken($color-dark, 10%);
          }
        }
      }
    }
  }

  .n-color {
    display: flex;
    flex-direction: row;
    // padding-top: 0.5em;
    border-top: 1px solid $background;
    > div {
      padding: 0.5em 0em;
      height: 2em;
      width: 6em;
      cursor: pointer;
      &:first-child {
        width: 9em;
      }
    }
    .is-black {
      background-color: $black;
      &:hover {
        border: 1px solid darken($black, 10%);
      }
    }
    .is-white {
      background-color: $white;
      &:hover {
        border: 1px solid darken($white, 10%);
      }
    }
    .is-grey-lightest {
      background-color: $grey-lightest;
      &:hover {
        border: 1px solid darken($grey-lightest, 10%);
      }
    }
    @each $name, $color in $shades {
      .is-#{$name} {
        background-color: $color;
        &:hover {
          border: 1px solid darken($color, 10%);
        }
      }
    }
  }
}
</style>
